<html>

<head>
    <title>Canvas tutorial</title>
    <style type="text/css">
    canvas {
        border: 1px solid black;
    }

    body {
        background: rgb(50, 54, 57);
    }
    </style>
</head>

<body >
    <canvas id="canvas" width="500" height="400"></canvas>
    <button id="invertbtn">invertbtn</button>
    <button id="grayscalebtn">grayscalebtn</button>
</body>
    <script type="text/javascript">
      var img = new Image();
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
      // img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
      img.src = 'https://image.artyears.cn/mini-programe/assets/img/v2/common/banner/create_clg_banner.png';
      // img.crossOrigin = "Anonymous";
      img.onload = function() {
        ctx.drawImage(img, 0, 0);
        // draw(this);
        // var url = canvas.toDataURL(); 
        var stream = canvas.captureStream(0); // 25 FPS       
      };


      function draw(img) {


        return
        img.style.display = 'none';
        var imageData = ctx.getImageData(0,0,canvas.width, canvas.height);
        var data = imageData.data;
          
        var invert = function() {
          for (var i = 0; i < data.length; i += 4) {
            data[i]     = 255 - data[i];     // red
            data[i + 1] = 255 - data[i + 1]; // green
            data[i + 2] = 255 - data[i + 2]; // blue
          }
          ctx.putImageData(imageData, 0, 0);
        };

        var grayscale = function() {
          for (var i = 0; i < data.length; i += 4) {
            var avg = (data[i] + data[i +1] + data[i +2]) / 3;
            data[i]     = avg; // red
            data[i + 1] = avg; // green
            data[i + 2] = avg; // blue
          }
          ctx.putImageData(imageData, 0, 0);
        };

        var invertbtn = document.getElementById('invertbtn');
        invertbtn.addEventListener('click', invert);
        var grayscalebtn = document.getElementById('grayscalebtn');
        grayscalebtn.addEventListener('click', grayscale);
      }
    </script>

</html>